<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户&渠道管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span
          class="u-cursor"
          @click="$router.replace('/cpa/customer-info')"
        >客户信息</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>新建客户信息</el-breadcrumb-item>
    </el-breadcrumb>

    <Container class="u-pb60">
      <el-form
        ref="form"
        :model="customerInfo"
        label-width="160px"
        class="m-form--detail"
      >
        <ContainerTitle>公司信息</ContainerTitle>
        <el-form-item label="客户简称：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.name"
            placeholder="请输入客户简称"
          ></el-input>
        </el-form-item>
        <el-form-item
          style="margin-bottom: 0;"
          label="客户主体："
        >
          <el-form-item
            style="margin-bottom: 15px;"
            v-for="(item, index) in customerInfo.alias"
            :key="item.id"
            v-show="!item.delete"
          >
            <el-input
              size="small"
              style="width: 350px;"
              v-model="item.name"
              placeholder="请输入客户主体"
            ></el-input>
            <el-button
              size="small"
              style="margin-left: 10px; vertical-align: top;"
              v-if="index === 0"
              @click="addAlias"
            >添加</el-button>
            <el-button
              size="small"
              style="margin-left: 10px; vertical-align: top;"
              v-if="index !== 0"
              @click="delAlias(index)"
            >删除</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item label="客户性质：">
          <el-select
            size="small"
            style="width: 350px;"
            v-model="customerInfo.property"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options.property "
              :key="item.id"
              :label="item.val"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照号：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.busNo"
            placeholder="请输入营业执照号"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件有效期：">
          <el-date-picker
            size="small"
            style="width: 350px;"
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <ContainerTitle>联系方式</ContainerTitle>
        <el-form-item label="联系人：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.contact"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.phone"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="QQ：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.qq"
            placeholder="请输入QQ号"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.address"
            placeholder="请按格式输入地址：省 市 详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="后台账号："
          style="margin-bottom: 0;"
        >
          <el-form-item
            style="margin-bottom: 15px;"
            v-for="(item, index) in customerInfo.adminSysAccounts"
            :key="index"
          >
            <el-input
              size="small"
              style="width: 350px;"
              v-model="item.url"
              placeholder="请输入后台网址"
              auto-complete="off"
            >
              <template slot="prepend">http://</template>
            </el-input>
            <el-input
              size="small"
              style="width: 150px; margin-left: 10px;"
              v-model="item.account"
              placeholder="请输入后台账号"
              auto-complete="off"
            ></el-input>
            <el-input
              size="small"
              style="width: 150px; margin-left: 10px;"
              type="password"
              v-model="item.pwd"
              placeholder="请输入后台密码"
              auto-complete="off"
            ></el-input>
            <el-button
              style="margin-left: 10px;"
              size="small"
              v-if="index === 0"
              @click="addRow()"
            >添加</el-button>
          </el-form-item>
        </el-form-item>
        <ContainerTitle>财务信息</ContainerTitle>
        <el-form-item label="财务类型：">
          <el-select
            size="small"
            style="width: 350px;"
            v-model="customerInfo.finType"
            filterable
            placeholder="请选择"
            class="f_select1"
          >
            <el-option
              v-for="item in options.property "
              :key="item.id"
              :label="item.val"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="纳税登记号：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.taxId"
            placeholder="请输入纳税登记号"
          ></el-input>
        </el-form-item>
        <el-form-item label="收款银行：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.bank"
            placeholder="请输入收款银行"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户地址：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.accountAddress"
            placeholder="请输入开户地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行账号：">
          <el-input
            size="small"
            style="width: 350px;"
            v-model="customerInfo.bankAccount"
            placeholder="请输入银行账号"
          ></el-input>
        </el-form-item>
      </el-form>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup
        isFixed
        align="right"
      >
        <el-button
          size="small"
          @click="go_back()"
        >返回</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
        >确认</el-button>
      </ButtonGroup>
    </Affix>
  </div>
</template>

<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";

export default {
  components: {
    Container,
    ContainerTitle,
    Affix,
    ButtonGroup
  },
  data() {
    return {
      dateValue: "",
      title: "创建客户信息",
      menu_nav: ["CPA数据管理", "客户信息管理", "创建客户信息"],
      customerInfo: {
        accountAddress: "",
        address: "",
        adminSysAccounts: [
          {
            account: "",
            id: 1,
            pwd: "",
            url: ""
          }
        ],
        alias: [
          {
            id: 1,
            name: "",
            delete: false
          }
        ],
        bank: "",
        bankAccount: "",
        busNo: "",
        cardExpired: "",
        contact: "",
        email: "",
        finType: "",
        id: "",
        name: "",
        fullName: "",
        phone: "",
        property: "",
        qq: "",
        taxId: ""
      },
      adminSysAccountsIdCount: 1,
      options: {
        property: [
          {
            id: "1",
            val: "公司"
          },
          {
            id: "2",
            val: "个人"
          }
        ]
      }
    };
  },
  created() {
    this.customerInfo.id = parseInt(this.$route.query.customerId);
    if (this.customerInfo.id > 0) {
      this.title = "编辑客户信息";
      this.pageInfo();
    }
  },
  methods: {
    pageInfo() {
      /*初始化客户信息*/
      this.$http({
        method: "get",
        url: this.apiUrl.customerGet,
        params: {
          id: this.customerInfo.id
        }
      })
        .then(res => {
          if (res.status == 200) {
            this.customerInfo = res.data;
            this.customerInfo.finType = String(this.customerInfo.finType || "");
            this.customerInfo.property = String(this.customerInfo.property || "");
            this.customerInfo.adminSysAccounts.length == 0 &&
              this.customerInfo.adminSysAccounts.push({
                account: "",
                id: 1,
                pwd: "",
                url: ""
              });
          }
        })
        .catch(() => {});
    },
    onSubmit() {
      var apiUrl = this.apiUrl.customerNew;
      this.customerInfo.id > 0 ? (apiUrl = this.apiUrl.customerUpdate) : null;
      var adminLen = this.customerInfo.adminSysAccounts.length;
      if (
        adminLen > 1 &&
        this.customerInfo.adminSysAccounts[adminLen - 1].url == ""
      ) {
        this.customerInfo.adminSysAccounts.pop();
      }
      if (
        !this.customerInfo.id &&
        this.customerInfo.alias.length == 1 &&
        this.customerInfo.alias[0].name == ""
      ) {
        this.$message({
          type: "info",
          message: "客户主体不能为空"
        });
      }
      let flag = false;
      if (this.customerInfo.id) {
        this.customerInfo.alias.forEach((item, index) => {
          if (!item.delete && item.name) return false;
          if (index == this.customerInfo.alias.length - 1) {
            flag = true;
            this.$message({
              type: "info",
              message: "客户主体不能为空"
            });
          }
        });
      }
      if (flag) {
        return false;
      }
      this.$http({
        method: "post",
        url: apiUrl,
        data: this.customerInfo
      })
        .then(res => {
          if (res.status == 200) {
            var data = res.data;
            if (data.status == 2) {
              this.$message({
                type: "info",
                message: data.msg
              });
            } else {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.go_back();
            }
          } else {
            this.$message({
              type: "error",
              message: "操作失败，请完善信息，并重新提交"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "请完善信息，并重新提交"
          });
        });
    },
    go_back() {
      this.$router.back();
    },
    addRow() {
      var adminArr = this.customerInfo.adminSysAccounts;
      var adminLen = adminArr.length;
      if (adminArr[adminLen - 1].url == "") {
        this.$message({
          type: "info",
          message: "后台链接不能为空"
        });
        return false;
      }
      this.adminSysAccountsIdCount = adminLen + 1;
      this.customerInfo.adminSysAccounts.push({
        account: "",
        id: this.adminSysAccountsIdCount,
        pwd: "",
        url: ""
      });
    },
    addAlias() {
      var aliasArr = this.customerInfo.alias;
      var aliasLen = aliasArr.length;
      if (
        aliasLen > 0 &&
        aliasArr[aliasLen - 1].name == "" &&
        !aliasArr[aliasLen - 1].delete
      ) {
        this.$message({
          type: "info",
          message: "不可重复添加空字段"
        });
        return false;
      }
      this.customerInfo.alias.push({
        id: aliasLen + 1,
        name: "",
        delete: false
      });
    },
    delAlias(index) {
      let aliasArr = this.customerInfo.alias;
      let aliasLen = aliasArr.length;
      if (aliasLen <= 1) {
        if (this.customerInfo.id) {
          this.customerInfo.alias[index].delete = true;
          // this.customerInfo.alias.push({
          //     'id': aliasLen+1,
          //     'name': '',
          //     'delete': false
          // });
        } else {
          this.customerInfo.alias = [
            {
              id: 1,
              name: "",
              delete: false
            }
          ];
        }
      } else {
        if (this.customerInfo.id) {
          this.customerInfo.alias[index].delete = true;
        } else {
          this.customerInfo.alias.splice(index, 1);
          this.customerInfo.alias.forEach((item, index) => {
            item.id = index + 1;
          });
        }
      }
    },
    dateChange() {
      this.customerInfo.cardExpired = this.formatDateTime(
        this.dateValue,
        "y-m-d"
      );
    }
  }
};
</script>
